<template>
  <div class="wrapper">
    <header-nav :index_num="index_num"></header-nav>
    <div id="box">
      <!-- 导航 -->
      <div class="top">
        <div class="span">
          <span @click="btn(0)" :class="sub == 0 ? 'style' : ''">项目进度</span>
          <span @click="btn(1)" :class="sub == 1 ? 'style' : ''">项目信息</span>
          <span @click="btn(3)" :class="sub == 3 ? 'style' : ''" v-if="bgData">项目申报书</span>
          <span @click="btn(2)" :class="sub == 2 ? 'style' : ''" v-if="bgData">项目执行信息</span>
        </div>
        <div class="daochu" v-if="sub == 1" @click="download()">项目导出</div>
      </div>
      <!-- 进度 -->
      <!-- <div class="img" v-if="sub == 0">
        <img :src="imgUrl.tg" v-if="state == 0" />
        <img :src="imgUrl.btg" v-if="state == 1" />
        <img :src="imgUrl.shz" v-if="state == 2" />
        <img :src="imgUrl.zxz" v-if="state == 3" />
      </div>-->
      <!-- 项目流程 -->
      <div class="bobb" v-if="sub == 0">
        <div>
          <div class="left">
            <div class="time">
              <template v-for="(time, index) in zDate.date">
                <span v-if="index < 5" :key="index">{{ time }}</span>
              </template>
            </div>
            <div class="jdt">
              <!-- 已申报 -->
              <div v-for="(i,j) in zDate" :key="j">
                <img class="sx0" :src="imgUrl1.sx0" alt />
                <img class="d0" :src="imgUrl1.d1" v-if="i.type" />
                <img class="d1" :src="imgUrl1.d0" v-else />
              </div>
              <!-- <div>
              <img class="sx1" :src="imgUrl.sx0" alt />
              <img class="d0" :src="imgUrl.d0" v-if="zDate.type" />
              <img class="d1" :src="imgUrl.d1" v-else />
            </div>
                <div>
              <img class="sx1" :src="imgUrl.sx0" alt />
              <img class="d0" :src="imgUrl.d0" v-if="zDate.type" />
              <img class="d1" :src="imgUrl.d1" v-else />
            </div>
                <div>
              <img class="sx1" :src="imgUrl.sx0" alt />
              <img class="d0" :src="imgUrl.d0" v-if="zDate.type" />
              <img class="d1" :src="imgUrl.d1" v-else />
              </div>-->

              <!-- 审核中 -->
              <!-- <img class="sx1" :src="imgUrl.sx1" alt />
            <img class="d0" :src="imgUrl.d0" v-if="zDate.type" />
              <img class="d1" :src="imgUrl.d1" v-else />-->
              <!-- 审核通过 -->
              <!-- <img class="sx1" :src="imgUrl.sx1" alt />
            <img class="d0" :src="imgUrl.d0" v-if="zDate.type" />
              <img class="d1" :src="imgUrl.d1" v-else />-->
              <!-- 评审中 -->
              <!-- <img class="sx1" :src="imgUrl.sx1" alt />
            <img class="d0" :src="imgUrl.d0" v-if="zDate.type" />
              <img class="d1" :src="imgUrl.d1" v-else />-->
              <!-- 评审通过 -->
              <!-- <img class="sx1" :src="imgUrl.sx1" alt />
            <img class="d0" :src="imgUrl.d0" v-if="zDate.type" />
              <img class="d1" :src="imgUrl.d1" v-else />-->
              <!-- end -->
              <img :src="imgUrl1.sx1" alt style="width:3px;height:61px;border" />
            </div>
            <div class="bb">
              <div class="o" v-for="(i,j) in zDate" :key="j">
                <span>{{i.string}}</span>
                <img class="oo" :src="imgUrl1.d0" alt />
              </div>
              <!-- <div>
              <span>初筛审核中</span>
              <img class="oo" :src="imgUrl.d0" alt />
            </div>
            <div class="div-v">
              <span>初筛审核通过</span>
              <img class="oo" :src="imgUrl.d0" alt />
              <section v-if="zDate.type === 5">
                <span style="color:#e60012;font-size:20px;">总分: {{ zDate.score }}分</span>
                <span style="color:#999;font-size:16px;">（及格分数: 70）</span>
              </section>
            </div>
            <div>
              <span>立项评审中</span>
              <img class="oo" :src="imgUrl.d0" alt />
            </div>
            <div>
              <span>立项评审通过</span>
              <img class="oo" :src="imgUrl.d0" alt />
              <section v-if="zDate.type === 10">
                <span style="color:#e60012;font-size:20px;">总分: {{ zDate.score }}分</span>
                <span style="color:#999;font-size:16px;">（及格分数: 70）</span>
              </section>
              </div>-->
            </div>
          </div>
        </div>

        <div class="newButton" v-if="status==10">
          <button type="primary" class="newBtn" @click="hreftwo">创建项目执行信息</button>
        </div>
        <div class="right">
          <!-- <p>项目流程说明</p>
          <ul>
            <li v-for="(list,index) in text" :key="index">{{list}}</li>
          </ul>-->
          <img :src="imgUrl1.xd" style="width:535px;height:698px;" />
        </div>
      </div>

      <!-- 项目信息 -->
      <div class="boxx" v-if="sub == 1" :class="popupStatus == true ? 'fliter' : ''" id="pdfDom">
        <h3 class="title1">一、基本信息</h3>
        <div class="one-o">
          <ul>
            <li>项目名称：{{ zData.name }}</li>
            <li>项目申报单位：{{ zData.company }}</li>
            <li>项目类型：{{ zData.tid }}</li>
            <li>项目落地区域：{{ zData.rid }}</li>
            <li>一级项目方向：{{ zData.first_level }}</li>
            <li>二级项目方向：{{ zData.secondary }}</li>
            <li>项目服务领域：{{ zData.fieldeara }}</li>
            <li>项目有效期: {{ zData.aterm + "至" + zData.fterm }}</li>
            <li>申报单位属性：{{ zData.attribute }}</li>
            <li>通讯地址：{{ zData.postaladdress }}</li>
            <li>电子信箱：{{ zData.pmail }}</li>
            <li>传真电话：{{ zData.fax_tel }}</li>
            <li>邮政编码：{{ zData.postalcode }}</li>
          </ul>
          <ul>
            <li>法定代表人：{{ zData.plegal }}</li>
            <li>法人代码：{{ zData.plcode }}</li>
            <li>负责人姓名：{{ zData.pname }}</li>
            <li>职务：{{ zData.poster }}</li>
            <li>办公电话：{{ zData.poffice_tel }}</li>
            <li>手机：{{ zData.aphone }}</li>
            <li>联系人姓名：{{ zData.cname }}</li>
            <li>职务：{{ zData.cpost }}</li>
            <li>办公电话：{{ zData.coffice_tel }}</li>
            <li>手机：{{ zData.cphone }}</li>
          </ul>
          <ul>
            <li>项目主责单位：{{ zData.prespo }}</li>
            <li>通讯地址：{{ zData.respoadd }}</li>
            <li>邮政编码：{{ zData.respopcode }}</li>
            <li>传真电话：{{ zData.respophone }}</li>
            <li>电子信箱：{{ zData.respomail }}</li>
            <li>负责人姓名：{{ zData.respopname }}</li>
            <li>职务：{{ zData.respopost }}</li>
            <li>手机：{{ zData.respoptel }}</li>
            <li>办公电话：{{ zData.respoophone }}</li>
            <li>负责人姓名：{{ zData.respocname }}</li>
            <li>职务：{{ zData.respocpost }}</li>
            <li>办公电话：{{ zData.respocophone }}</li>
            <li>手机：{{ zData.respoctel }}</li>
          </ul>
        </div>
        <h3 class="title1">二、申报单位简介:</h3>
        <div class="one-e">
          <p v-html="zData.decldes">{{ zData.decldes }}</p>
        </div>
        <h3 class="title1">三、项目简介</h3>
        <div class="one-e">
          <p v-html="zData.prodes">{{ zData.prodes }}</p>
        </div>
        <h3 class="title1">四、项目论证</h3>
        <h4>(一) 项目实施的必要性、可行性</h4>
        <div class="one-e">
          <p v-html="zData.prodemo">{{ zData.prodemo }}</p>
        </div>
        <h4>(二) 项目实施的已有基础、具体方法和途径及进度安排、预期效果及完成时间</h4>
        <h5>1.项目实施的已有基础</h5>
        <div class="one-e">
          <p v-html="zData.prodemojc">{{ zData.prodemojc }}</p>
        </div>
        <h5>2.具体方法和途径</h5>
        <div class="one-e">
          <p v-html="zData.prodemotj">{{ zData.prodemotj }}</p>
        </div>
        <h5>3.进度安排</h5>
        <div class="one-e">
          <p v-html="zData.prodemojd">{{ zData.prodemojd }}</p>
        </div>
        <h5>4.预期效果</h5>
        <div class="one-e">
          <p v-html="zData.prodemoxg">{{ zData.prodemoxg }}</p>
        </div>
        <h5>5.项目团队及分工</h5>
        <div class="one-e">
          <p v-html="zData.prodemofg">{{ zData.prodemofg }}</p>
        </div>
        <h4>(三) 项目实施涵盖的范围、实施的规模、服务的人群，创新之处等</h4>
        <div class="one-e">
          <p v-html="zData.prodemotwo">{{ zData.prodemotwo }}</p>
        </div>
        <h3 class="title1">五、经费预算:</h3>
        <div id="one_e" v-html="zData.funds">{{ zData.funds }}</div>
        <h3 class="title1">六、申报单位承诺:</h3>
        <div class="one-e">
          <p>{{ msg }}</p>
        </div>
        <h3 class="title1">七、项目主责单位意见 :</h3>
        <div class="xxxx">
          <template>
            <el-upload
              class="upload-demo"
              :action="$upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="successUpload"
              :before-remove="beforeRemove"
              multiple
              :limit="10"
              :on-exceed="handleExceed"
              :file-list="dataFile"
            >
              <el-button size="small" type="primary">上传文件</el-button>
              <span slot="tip" class="el-upload__tip">只能上传一张不同的图片</span>
            </el-upload>
          </template>
        </div>
        <!-- <div class="one-e">
          <p>
            <span>
              <a :href="dataFile[0].url" :download="dataFile[0].name">
                <span>下载</span>
              </a>
              <a
                 @click="downloadTxt(zData.proimages,'fileName')"
              >
                <span>下载</span>
              </a>
              &nbsp;|&nbsp;
              <span @click="preview()">预览</span>
            </span>
          </p>
        </div>-->
      </div>
      <div v-if="sub == 3">
        <div class="wrapper">
          <div id="box1">
            <h3 style="line-height:62px">填写优化后的申报书</h3>
            <!-- 导航 -->
            <div class="box">
              <div
                :class="sub1 == 0 ? 'color' : ''"
                :style="{
            'background-image':
              sub1 == 0 ? 'url(' + imgUrl.bg0 + ')' : 'url(' + imgUrl.bg1 + ')'
          }"
              >1 填写基本信息</div>
              <div
                :class="sub1 == 1 ? 'color' : ''"
                :style="{
            'background-image':
              sub1 == 1 ? 'url(' + imgUrl.bg0 + ')' : 'url(' + imgUrl.bg1 + ')'
          }"
              >2 填写详细信息</div>
            </div>
            <div style="margin-left:15px;display:flex">
              <span style="font-weight:bold;margin-left:31px;margin-bottom:27px">项目状态：</span>
              <span v-if="bgData.status==1" style="color:red">已保存</span>
              <span v-if="bgData.status==2" style="color:red">已提交</span>
              <span v-if="bgData.status==3" style="color:red">已驳回</span>
              <span v-if="bgData.status==4" style="color:red">已通过</span>
            </div>

            <!-- <form action method enctype="multipart/form-data" onsubmit="return false">
              <div v-show="sub1 == 0">
            <h4>一、基本信息</h4>-->
            <!-- start -->
            <!-- <aside>
                  <div style="display:flex">
                    <label>项目名称:</label>
                    <input type="text" name="name" v-model="bgData.name" required />
                  </div>
                  <div style="display:flex">
                    <label>项目申报单位:</label>
                    <input
                      type="text"
                      name="company"
                      v-model="bgData.company"
                      value
                      disabled
                      required
                    />
                  </div>
            </aside>-->
            <!-- end -->
            <!-- start -->
            <!-- <aside>
                  <div style="display:flex">
                    <label>项目类别:</label>
                    <select name="tid" v-model="tid">
                      <template v-for="(type, index) in types">
                        <option :key="index" :value="index">{{ type }}</option>
                      </template>
                    </select>
                  </div>
                  <div style="display:flex;position:relative;left:38px">
                    <label>项目落地区域:</label>
                    <select name="rid" v-model="rid">
                      <template v-for="(list, index) in area">
                        <option :key="index" :value="index">{{ list }}</option>
                      </template>
                    </select>
                  </div>
            </aside>-->
            <!-- end -->
            <!-- start -->
            <!-- <aside>
                  <div style="display:flex;position:relative;right:29px">
                    <label>一级项目方向:</label>
                    <select name="rid" v-model="first_level">
                      <template v-for="(list, index) in first_levels">
                        <option :key="index" :value="index">{{ list }}</option>
                      </template>
            </select>-->
            <!-- <input type="text" name="first_level" v-model="first_level" value required /> -->
            <!-- </div>
                  <div style="display:flex">
                    <label>二级项目方向:</label>
                    <input type="text" name="secondary" v-model="secondary" value required />
                  </div>
            </aside>-->
            <!-- end -->
            <!-- start -->
            <!-- <aside>
                  <div style="display:flex;position:relative;right:29px">
                    <label>项目服务领域:</label>
                    <input type="text" name="fieldeara" v-model="fieldeara" value required />
                  </div>
                  <div style="display:flex">
                    <label>申报单位属性:</label>
                    <input type="text" name="attribute" v-model="attribute" value required />
                  </div>
            </aside>-->
            <!-- end -->
            <!-- start -->
            <!-- <aside>
                  <div style="display:flex">
                    <label>申请日期:</label>
                    <input type="date" name="aterm" v-model="aterm" value required />
                  </div>
                  <div style="display:flex">
                    <label>截止日期:</label>
                    <input type="date" name="fterm" v-model="fterm" value required />
                  </div>
            </aside>-->
            <!-- end -->
            <!-- start -->
            <!-- <aside>
                  <div style="display:flex">
                    <label>通讯地址:</label>
                    <input type="text" name="postaladdress" v-model="postaladdress" value required />
                  </div>
                  <div style="display:flex">
                    <label>邮政编码:</label>
                    <input type="text" name="postalcode" v-model="postalcode" value required />
                  </div>
            </aside>-->
            <!-- end -->
            <!-- start -->
            <!-- <aside>
                  <div style="display:flex">
                    <label>电子邮箱:</label>
                    <input type="text" name="pmail" v-model="pmail" value required />
                  </div>
                  <div style="display:flex">
                    <label>传真电话:</label>
                    <input type="text" placeholder="非必填" name="fax_tel" v-model="fax_tel" value />
                  </div>
            </aside>-->
            <!-- end -->
            <!-- start -->
            <!-- <aside>
                  <div style="display:flex;position:relative;right:15px">
                    <label>法定代表人:</label>
                    <input type="text" name="plegal" v-model="plegal" value required />
                  </div>
                  <div style="display:flex">
                    <label>统一社会信用代码:</label>
                    <input type="text" name="plcode" v-model="plcode" value required />
                  </div>
            </aside>-->
            <!-- end -->
            <!-- start -->
            <!-- <section>
                  <div style="display:flex">
                    <label>负责人姓名:</label>
                    <input class="i" type="text" name="pname" v-model="pname" value required />
                  </div>
                  <div style="display:flex">
                    <label>职务:</label>
                    <input class="i" type="text" name="poster" v-model="poster" value required />
                  </div>
                  <div style="display:flex">
                    <label>办公电话:</label>
                    <input
                      class="i"
                      type="text"
                      name="poffice_tel"
                      v-model="poffice_tel"
                      value
                      required
                    />
                  </div>
                  <div style="display:flex">
                    <label>手机:</label>
                    <input class="i" type="text" name="aphone" v-model="aphone" value required />
                  </div>
            </section>-->
            <!-- end -->
            <!-- <section>
                  <div style="display:flex">
                    <label>联系人姓名:</label>
                    <input class="i" type="text" name="cname" v-model="cname" value required />
                  </div>
                  <div style="display:flex">
                    <label>职务:</label>
                    <input class="i" type="text" name="cpost" v-model="cpost" value required />
                  </div>
                  <div style="display:flex">
                    <label>办公电话:</label>
                    <input
                      class="i"
                      type="text"
                      name="coffice_tel"
                      v-model="coffice_tel"
                      value
                      required
                    />
                  </div>
                  <div style="display:flex">
                    <label>手机:</label>
                    <input class="i" type="text" name="cphone" v-model="cphone" value required />
                  </div>
            </section>-->
            <!-- end -->
            <!-- <div class="btn" @click="next(1)">下一页</div>
            </div>-->
            <!-- <div v-show="sub1 == 1"> -->
            <!-- <div class="cc">
                  start
                  <aside>
                    <div>
                      <label>项目主责单位:</label>
                      <input class="i-i" type="text" name="prespo" v-model="prespo" value required />
                    </div>
                  </aside>
                  end
                  start
                  <aside>
                    <div>
                      <label>通讯地址:</label>
                      <input type="text" name="respoadd" v-model="respoadd" value required />
                    </div>
                    <div>
                      <label>邮政编码:</label>
                      <input type="text" name="respopcode" v-model="respopcode" value required />
                    </div>
                  </aside>
                  end
                  start
                  <aside>
                    <div>
                      <label>电子邮箱:</label>
                      <input type="text" name="respomail" v-model="respomail" value required />
                    </div>
                    <div>
                      <label>传真电话:</label>
                      <input
                        type="text"
                        placeholder="非必填"
                        name="respophone"
                        v-model="respophone"
                        value
                      />
                    </div>
                  </aside>
                  end
                  start
                  <section>
                    <div>
                      <label>负责人姓名:</label>
                      <input
                        class="i"
                        type="text"
                        name="respopname"
                        v-model="respopname"
                        value
                        required
                      />
                    </div>
                    <div>
                      <label>职务:</label>
                      <input
                        class="i"
                        type="text"
                        name="respopost"
                        v-model="respopost"
                        value
                        required
                      />
                    </div>
                    <div>
                      <label>办公电话:</label>
                      <input
                        class="i"
                        type="text"
                        name="respoophone"
                        v-model="respoophone"
                        value
                        required
                      />
                    </div>
                    <div>
                      <label>手机:</label>
                      <input
                        class="i"
                        type="text"
                        placeholder="非必填"
                        name="respoptel"
                        v-model="respoptel"
                        value
                      />
                    </div>
                  </section>
                  end
                  <section>
                    <div>
                      <label>联系人姓名:</label>
                      <input
                        class="i"
                        type="text"
                        name="respocname"
                        v-model="respocname"
                        value
                        required
                      />
                    </div>
                    <div>
                      <label>职务:</label>
                      <input
                        class="i"
                        type="text"
                        name="respocpost"
                        v-model="respocpost"
                        value
                        required
                      />
                    </div>
                    <div>
                      <label>办公电话:</label>
                      <input
                        class="i"
                        type="text"
                        name="respocophone"
                        v-model="respocophone"
                        value
                        required
                      />
                    </div>
                    <div>
                      <label>手机:</label>
                      <input
                        class="i"
                        type="text"
                        placeholder="非必填"
                        name="respoctel"
                        v-model="respoctel"
                        value
                      />
                    </div>
                  </section>
                  end
            </div>-->
            <!-- <div>
                  <div class="xx">
                    <h5>二、申报单位简介</h5>
                    <div class="rich">
                      <aboutUs @aboutUs="aboutUs" :aboutUsVal="aboutUsVal"></aboutUs>
                    </div>
            </div>-->
            <!-- <div class="xx"> -->
            <!-- <h5>三、项目简介</h5>
                    <div class="rich">
                      <ProjectBrief @projectBrief="projectBrief" :projectBriefVal="projectBriefVal"></ProjectBrief>
                    </div>
                  </div>
                  <div class="xx">
                    <h5>四、项目论证</h5>
                    <h3>(一) 项目实施的必要性、可行性</h3>
                    <div class="rich">
                      <ProjectAssessment
                        @projectAssessment="projectAssessment"
                        :projectAssessmentVal="projectAssessmentVal"
                      ></ProjectAssessment>
            </div>-->
            <!-- <h3>
                      (二)
                      项目实施的已有基础、具体方法和途径及进度安排、预期效果及完成时间
                    </h3>
                    <p>1.项目实施的已有基础</p>
                    <article>〔说明：包括但不限于项目实施已有的相关经验或有助于项目实施的资源支持等。〕</article>
                    <div class="rich">
                      <ExistingBasis
                        @existingBasis="existingBasis"
                        :existingBasisVal="existingBasisVal"
                      ></ExistingBasis>
                    </div>
                    <p>2.具体方法和途径</p>
                    <article>〔说明：包括项目实施的具体方式、途径。明确项目的具体组成内容（子项目、各类服务等），每类、每次活动的具体内容、形式、对象、次数、人数等。〕</article>
                    <div class="rich">
                      <MethodsWay @methodsWay="methodsWay" :methodsWayVal="methodsWayVal"></MethodsWay>
                    </div>
                    <p>3.进度安排</p>
                    <article>〔说明：可单独作为一部分，也可与“具体方法和途径”一并细化到子项目中说明。建议时间单元为月，不建议简单表述为“年内”、“上半年”、“下半年”、“第*季度”等。〕</article>
                    <div class="rich">
                      <scheduling @scheduling="scheduling" :schedulingVal="schedulingVal"></scheduling>
                    </div>
                    <p>4.预期效果</p>
                    <article>〔说明：具体明确项目实施所要达到的目标或预期的效果。〕</article>
                    <div class="rich">
                      <DesiredEffect
                        @desiredEffect="desiredEffect"
                        :desiredEffectVal="desiredEffectVal"
                      ></DesiredEffect>
                    </div>
                    <p>5.项目团队及分工</p>
                    <article>〔说明：包括项目实施的组织管理机构组成，各子项目或各项服务活动的具体承接单位和负责人，各有关协作单位等。要把可能引起转包怀疑的所有事项交代清楚，避免在检查、审计和评估中产生误解。〕</article>
                    <div class="rich">
                      <DivisionLabor
                        @divisionLabor="divisionLabor"
                        :divisionLaborVal="divisionLaborVal"
                      ></DivisionLabor>
            </div>-->
            <!-- <h3>(三) 项目实施涵盖的范围、实施的规模、服务的人群，创新之处等</h3>
                    <div class="rich">
                      <cover @cover="cover" :coverVal="coverVal"></cover>
                    </div>
                  </div>
                  <div class="xx">
                    <h5>五、经费预算</h5>
                    <div class="rich">
                      <RichTextOne @quillVal="quillVal" :initialTextVal="initialTextVal"></RichTextOne>
                    </div>
                  </div>
                  <div class="xxx">
                    <h5>六、申报单位承诺</h5>
                    <div class="plpl" style="margin-top:32px;">
                      <span
                        @click="thf()"
                        :class="thff ? 'ic' : ''"
                        class="iconfont icon-fuxuankuang_xuanzhong"
                      ></span>
                      <label>我们确认项目申报内容的真实性,并愿意承担相应的责任</label>
                    </div>
                  </div>

                  <div class="xxx">
                    <h5>七、项目主责单位意见</h5>
                    <div class="xxxx">
                      <template>
                        <el-upload
                          class="upload-demo"
                          :action="$upload"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          :on-success="successUpload"
                          :before-remove="beforeRemove"
                          multiple
                          :limit="10"
                          :on-exceed="handleExceed"
                          :file-list="fileLists"
                        >
                          <el-button size="small" type="primary">上传文件</el-button>
                          <span slot="tip" class="el-upload__tip">只能上传一张不同的图片</span>
                        </el-upload>
                      </template>
            </div>-->
            <!-- <div class="mid_box">
                      <template>
                        <div>
                          <el-upload
                            class="avatar-uploader"
                            :action="$upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                          >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>-->
            <!-- <p class="box1">上传项目申报书</p> -->
            <!-- <p class="box1">{{filename?filename:''}}</p>
                          <p class="box1" style="font-weight:bold">
                            上传项目申报书
                            <span style="font-size:10px;color:red;postion:relative;top:-3px;font-weight:bold">*</span>
                            </p>
            </div>-->

            <!--文件上传-->
            <!-- </template>
                      <template>
                        <div>
                          <el-upload
                            class="avatar-uploader"
                            :action="$upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess1"
                            :before-upload="beforeAvatarUpload"
                          >
                            <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>-->
            <!-- <p class="box1">上传实施方案</p> -->
            <!-- <p class="box1">{{filename1?filename1:''}}</p>
                          <p class="box1" style="font-weight:bold">
                            上传实施方案
                            <span style="font-size:10px;color:red;postion:relative;top:-3px;font-weight:bold">*</span>
                            </p>
            </div>-->

            <!--文件上传-->
            <!-- </template>
                      <template>
                        <div>
                          <el-upload
                            class="avatar-uploader"
                            :action="$upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess2"
                            :before-upload="beforeAvatarUpload"
                          >
                            <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>-->
            <!-- <p class="box1">上传立项批复文件</p> -->
            <!-- <p class="box1">{{filename2?filename2:''}}</p>
                          <p class="box1" style="font-weight:bold">上传立项批复文件</p>
            </div>-->
            <!--文件上传-->
            <!-- </template>
                      <template>
                        <div>
                          <el-upload
                            class="avatar-uploader"
                            :action="$upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess3"
                            :before-upload="beforeAvatarUpload"
                          >
                            <img v-if="imageUrl3" :src="imageUrl3" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                          </el-upload>
            <p class="box1">上传项目合同</p>-->
            <!-- <p class="box1">{{filename3?filename3:''}}</p>
                          <p class="box1" style="font-weight:bold">上传项目合同</p>
            </div>-->

            <!--文件上传-->
            <!-- </template>
                      <template>
                        <div>
                          <el-upload
                            class="avatar-uploader"
                            :action="$upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess4"
                            :before-upload="beforeAvatarUpload"
                          >
                            <img v-if="imageUrl4" :src="imageUrl4" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>-->
            <!-- <p class="box1">上传服务承诺书</p> -->
            <!-- <p class="box1">{{filename4?filename4:''}}</p>
                          <p class="box1" style="font-weight:bold">上传服务承诺书</p>
            </div>-->

            <!--文件上传-->
            <!-- </template>
                    </div>
                  </div>
                </div>
                <div class="ll">
                  <button type="button" @click="next(0)">上一页</button>
                  <button type="button" @click="submit(0)">保存</button>
                  <button type="submit" @click="submit(1)">提交</button>
                </div>
              </div>
            </form>-->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="150px"
              class="demo-ruleForm"
              v-show="sub1 == 3"
            >
              <div style="display:flex">
                <el-form-item label="项目名称" prop="name" :error="errorMsg">
                  <el-input v-model="ruleForm.name" style="width:350px"></el-input>
                </el-form-item>
                <el-form-item label="项目申报单位" prop="region">
                  <!-- ruleForm.region -->
                  <el-input v-model="ruleForm.region" style="width:350px"></el-input>
                </el-form-item>
              </div>
              <div style="display:flex;">
                <el-form-item label="项目类型" prop="region1" style="margin-right:108px">
                  <el-select v-model="ruleForm.region1" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="项目落地区域" prop="region2">
                  <!-- ruleForm.region -->
                  <el-select v-model="ruleForm.region2" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div style="display:flex">
                <el-form-item label="一级项目方向" prop="yiji">
                  <el-input v-model="ruleForm.yiji" style="width:350px"></el-input>
                </el-form-item>
                <el-form-item label="二级项目方向" prop="erji">
                  <!-- ruleForm.region -->
                  <el-input v-model="ruleForm.erji" style="width:350px"></el-input>
                </el-form-item>
              </div>
              <div style="display:flex">
                <el-form-item label="项目服务领域" prop="serve">
                  <el-input v-model="ruleForm.serve" style="width:350px"></el-input>
                </el-form-item>
                <el-form-item label="申报单位属性" prop="danwei">
                  <!-- ruleForm.region -->
                  <el-input v-model="ruleForm.danwei" style="width:350px"></el-input>
                </el-form-item>
              </div>
              <el-form-item label="申报日期" required style="margin-right:125px">
                <el-col :span="11">
                  <el-form-item prop="date1">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="ruleForm.date1"
                      style="width: 70%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <!-- <el-col class="line" :span="2">-</el-col> -->
                <el-col :span="11">
                  <el-form-item prop="date2" label="截止日期">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="ruleForm.date2"
                      style="width:125%;"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>

              <div style="display:flex">
                <el-form-item label="通讯地址" prop="tongxun">
                  <el-input v-model="ruleForm.tongxun" style="width:350px"></el-input>
                </el-form-item>
                <el-form-item label="邮政编码" prop="youzheng">
                  <!-- ruleForm.region -->
                  <el-input v-model="ruleForm.youzheng" style="width:350px"></el-input>
                </el-form-item>
              </div>

              <div style="display:flex">
                <el-form-item label="电子邮箱" prop="email">
                  <el-input v-model="ruleForm.email" style="width:350px"></el-input>
                </el-form-item>
                <el-form-item label="传真电话" prop="call">
                  <!-- ruleForm.region -->
                  <el-input v-model="ruleForm.call" style="width:350px"></el-input>
                </el-form-item>
              </div>

              <div style="display:flex">
                <el-form-item label="法定代表人" prop="faren">
                  <el-input v-model="ruleForm.faren" style="width:350px"></el-input>
                </el-form-item>
                <el-form-item label="法人代码" prop="farencode">
                  <!-- ruleForm.region -->
                  <el-input v-model="ruleForm.farencode" style="width:350px"></el-input>
                </el-form-item>
              </div>

              <div style="display:flex">
                <el-form-item label="负责人姓名" prop="fuzeren" style="margin-right:-69px">
                  <el-input v-model="ruleForm.fuzeren" style="width:150px"></el-input>
                </el-form-item>
                <el-form-item label="职务" prop="zhiwu" style="margin-right:-69px">
                  <!-- ruleForm.region -->
                  <el-input v-model="ruleForm.zhiwu" style="width:150px"></el-input>
                </el-form-item>
                <el-form-item label="办公电话" prop="tel" style="margin-right:-69px">
                  <el-input v-model="ruleForm.tel" style="width:150px"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="phone" style="margin-right:-69px">
                  <!-- ruleForm.region -->
                  <el-input v-model="ruleForm.phone" style="width:150px"></el-input>
                </el-form-item>
              </div>

              <div style="display:flex;width:400px;">
                <el-form-item label="负责人姓名" prop="name" style="margin-right:-69px">
                  <el-input v-model="ruleForm.fuzeren1" style="width:150px"></el-input>
                </el-form-item>
                <el-form-item label="职务" prop="region" style="margin-right:-69px">
                  <!-- ruleForm.region -->
                  <el-input v-model="ruleForm.zhiwu1" style="width:150px"></el-input>
                </el-form-item>
                <el-form-item label="办公电话" prop="name" style="margin-right:-69px">
                  <el-input v-model="ruleForm.tel1" style="width:150px"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="region" style="margin-right:-69px">
                  <!-- ruleForm.region -->
                  <el-input v-model="ruleForm.phone1" style="width:150px"></el-input>
                </el-form-item>
              </div>
               <!-- <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> -->
              <el-form-item>
                <!-- <div class="btn" @click="next()">下一页</div> -->
               
                <!-- <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>-->
              </el-form-item>
            </el-form>

            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="150px"
              class="demo-ruleForm"
              v-show="sub1 == 1"
            >
              <div style="display:flex">
                <el-form-item label="法定代表人" prop="name">
                  <el-input v-model="ruleForm.faren" style="width:350px"></el-input>
                </el-form-item>
                <el-form-item label="法人代码" prop="region">
                  <!-- ruleForm.region -->
                  <el-input v-model="ruleForm.farencode" style="width:350px"></el-input>
                </el-form-item>
              </div>

              <div style="display:flex">
                <el-form-item label="负责人姓名" prop="name" style="margin-right:-69px">
                  <el-input v-model="ruleForm.fuzeren" style="width:150px"></el-input>
                </el-form-item>
                <el-form-item label="职务" prop="region" style="margin-right:-69px">
                  <!-- ruleForm.region -->
                  <el-input v-model="ruleForm.zhiwu" style="width:150px"></el-input>
                </el-form-item>
                <el-form-item label="办公电话" prop="name" style="margin-right:-69px">
                  <el-input v-model="ruleForm.tel" style="width:150px"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="region" style="margin-right:-69px">
                  <!-- ruleForm.region -->
                  <el-input v-model="ruleForm.phone" style="width:150px"></el-input>
                </el-form-item>
              </div>

              <div style="display:flex;width:400px;">
                <el-form-item label="负责人姓名" prop="name" style="margin-right:-69px">
                  <el-input v-model="ruleForm.fuzeren1" style="width:150px"></el-input>
                </el-form-item>
                <el-form-item label="职务" prop="region" style="margin-right:-69px">
                  <!-- ruleForm.region -->
                  <el-input v-model="ruleForm.zhiwu1" style="width:150px"></el-input>
                </el-form-item>
                <el-form-item label="办公电话" prop="name" style="margin-right:-69px">
                  <el-input v-model="ruleForm.tel1" style="width:150px"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="region" style="margin-right:-69px">
                  <!-- ruleForm.region -->
                  <el-input v-model="ruleForm.phone1" style="width:150px"></el-input>
                </el-form-item>
              </div>
              <div class="xx">
                <h5>二、申报单位简介</h5>
                <div class="rich">
                  <aboutUs @aboutUs="aboutUs" :aboutUsVal="aboutUsVal"></aboutUs>
                </div>
              </div>
              <div class="xx">
                <h5>三、项目简介</h5>
                <div class="rich">
                  <ProjectBrief @projectBrief="projectBrief" :projectBriefVal="projectBriefVal"></ProjectBrief>
                </div>
              </div>
              <div class="xx">
                <h5>四、项目论证</h5>
                <h3>(一) 项目实施的必要性、可行性</h3>
                <div class="rich">
                  <ProjectAssessment
                    @projectAssessment="projectAssessment"
                    :projectAssessmentVal="projectAssessmentVal"
                  ></ProjectAssessment>
                </div>
                <h3>
                  (二)
                  项目实施的已有基础、具体方法和途径及进度安排、预期效果及完成时间
                </h3>
                <p>1.项目实施的已有基础</p>
                <article>〔说明：包括但不限于项目实施已有的相关经验或有助于项目实施的资源支持等。〕</article>
                <div class="rich">
                  <ExistingBasis
                    @existingBasis="existingBasis"
                    :existingBasisVal="existingBasisVal"
                  ></ExistingBasis>
                </div>
                <p>2.具体方法和途径</p>
                <article>〔说明：包括项目实施的具体方式、途径。明确项目的具体组成内容（子项目、各类服务等），每类、每次活动的具体内容、形式、对象、次数、人数等。〕</article>
                <div class="rich">
                  <MethodsWay @methodsWay="methodsWay" :methodsWayVal="methodsWayVal"></MethodsWay>
                </div>
                <p>3.进度安排</p>
                <article>〔说明：可单独作为一部分，也可与“具体方法和途径”一并细化到子项目中说明。建议时间单元为月，不建议简单表述为“年内”、“上半年”、“下半年”、“第*季度”等。〕</article>
                <div class="rich">
                  <scheduling @scheduling="scheduling" :schedulingVal="schedulingVal"></scheduling>
                </div>
                <p>4.预期效果</p>
                <article>〔说明：具体明确项目实施所要达到的目标或预期的效果。〕</article>
                <div class="rich">
                  <DesiredEffect
                    @desiredEffect="desiredEffect"
                    :desiredEffectVal="desiredEffectVal"
                  ></DesiredEffect>
                </div>
                <p>5.项目团队及分工</p>
                <article>〔说明：包括项目实施的组织管理机构组成，各子项目或各项服务活动的具体承接单位和负责人，各有关协作单位等。要把可能引起转包怀疑的所有事项交代清楚，避免在检查、审计和评估中产生误解。〕</article>
                <div class="rich">
                  <DivisionLabor
                    @divisionLabor="divisionLabor"
                    :divisionLaborVal="divisionLaborVal"
                  ></DivisionLabor>
                </div>
                <h3>(三) 项目实施涵盖的范围、实施的规模、服务的人群，创新之处等</h3>
                <div class="rich">
                  <cover @cover="cover" :coverVal="coverVal"></cover>
                </div>
              </div>
              <div class="xx">
                <h5>五、经费预算</h5>
                <div class="rich">
                  <RichTextOne @quillVal="quillVal" :initialTextVal="initialTextVal"></RichTextOne>
                </div>
              </div>
              <div class="xxx">
                <h5>六、申报单位承诺</h5>
                <div class="plpl" style="margin-top:32px;">
                  <span
                    @click="thf()"
                    :class="thff ? 'ic' : ''"
                    class="iconfont icon-fuxuankuang_xuanzhong"
                  ></span>
                  <label>我们确认项目申报内容的真实性,并愿意承担相应的责任</label>
                </div>
              </div>
              <div class="xxx">
                <h5>七、项目主责单位意见</h5>
                <div class="xxxx">
                  <template>
                    <el-upload
                      class="upload-demo"
                      :action="$upload"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :on-success="successUpload"
                      :before-remove="beforeRemove"
                      multiple
                      :limit="10"
                      :on-exceed="handleExceed"
                      :file-list="fileLists"
                    >
                      <el-button size="small" type="primary">上传文件</el-button>
                      <span slot="tip" class="el-upload__tip">只能上传一张不同的图片</span>
                    </el-upload>
                  </template>
                </div>
              </div>

              <div class="mid_box">
                <template>
                  <div>
                    <el-upload
                      class="avatar-uploader"
                      :action="$upload"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <p class="box1">上传项目申报书</p>
                    <p class="box1">{{filename?filename:''}}</p>
                    <p class="box1" style="font-weight:bold">
                      上传项目申报书
                      <span
                        style="font-size:10px;color:red;postion:relative;top:-3px;font-weight:bold"
                      >*</span>
                    </p>
                  </div>

                  <!--文件上传-->
                </template>
                <template>
                  <div>
                    <el-upload
                      class="avatar-uploader"
                      :action="$upload"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess1"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <p class="box1">上传实施方案</p>
                    <p class="box1">{{filename1?filename1:''}}</p>
                    <p class="box1" style="font-weight:bold">
                      上传实施方案
                      <span
                        style="font-size:10px;color:red;postion:relative;top:-3px;font-weight:bold"
                      >*</span>
                    </p>
                  </div>

                  <!--文件上传-->
                </template>
                <template>
                  <div>
                    <el-upload
                      class="avatar-uploader"
                      :action="$upload"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess2"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <p class="box1">上传立项批复文件</p>
                    <p class="box1">{{filename2?filename2:''}}</p>
                    <p class="box1" style="font-weight:bold">上传立项批复文件</p>
                  </div>
                  <!--文件上传-->
                </template>
                <template>
                  <div>
                    <el-upload
                      class="avatar-uploader"
                      :action="$upload"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess3"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="imageUrl3" :src="imageUrl3" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <p class="box1">上传项目合同</p>
                    <p class="box1">{{filename3?filename3:''}}</p>
                    <p class="box1" style="font-weight:bold">上传项目合同</p>
                  </div>

                  <!--文件上传-->
                </template>
                <template>
                  <div>
                    <el-upload
                      class="avatar-uploader"
                      :action="$upload"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess4"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="imageUrl4" :src="imageUrl4" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <p class="box1">上传服务承诺书</p>
                    <p class="box1">{{filename4?filename4:''}}</p>
                    <p class="box1" style="font-weight:bold">上传服务承诺书</p>
                  </div>
                </template>
              </div>

              <el-form-item>
                <div class="ll">
                  <button type="button" @click="next(0)">上一页</button>
                  <button type="button" @click="submit(0)">保存</button>
                  <button type="submit" @click="submit(1)">提交</button>
                </div>
                <!-- <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>-->
              </el-form-item>
            </el-form>
            <section id="preview" v-if="popupStatus">
              <div class="tc" @click="preview()"></div>
              <section class="tc-text">
                <div class="queren" v-if="popupStatus">
                  <div>
                    <p>{{ subStatus == 0 ? "是否保存申报项目" : "是否确认申报项目" }}</p>
                    <div>
                      <span @click="popupStatus = !popupStatus">否</span>
                      <span @click="submitYes">是</span>
                    </div>
                    <span v-if="subStatus == 1">请您核对以上项目申报信息，提交之后不可修改</span>
                  </div>
                </div>
              </section>
            </section>
            <div
              class="boxx"
              v-if="sub == 2"
              :class="popupStatus == true ? 'fliter' : ''"
              id="pdfDom"
            >
              <div class="excuteBox">
                <!-- <el-collapse v-model="activeName" accordion>
              <el-collapse-item title="展开" name="1">
              </el-collapse-item>
                </el-collapse>-->
                <ul class="excute_list">
                  <li>项目信息</li>
                  <li>项目申报书</li>
                  <li>实施方案</li>
                  <li>立项批复文件</li>
                  <li>项目合同</li>
                  <li>服务承诺书</li>
                  <li>中期评审材料</li>
                  <li>结项评审材料</li>
                </ul>
                <!--左边-->
                <div class="excute_rt">
                  <ul>
                    <!-- 项目信息 -->
                    <li>项目名称:{{ executio.name }} 执行机构：{{ executio.company }}</li>
                    <!-- 项目申报书 -->
                    <li>
                      <span>
                        <a :href="executio.probook">{{shili?shili:"下载"}}</a>
                        <!-- <a :href="executio.probook" download>下载</a> | -->
                        <a :href="executio.probook" target="_blank" class="yulan">预览</a>
                      </span>
                    </li>
                    <!-- 实施方案 -->
                    <li>
                      <span>
                        <a :href="executio.fangan">{{shili1?shili1:"下载"}}</a>
                        <!-- <a :href="executio.fangan">下载</a> | -->
                        <a :href="executio.fangan" target="_blank" class="yulan">预览</a>
                      </span>
                    </li>
                    <!-- 立项批复文件 -->
                    <li>
                      <el-button size="small" type="primary" v-if="!executio.pifu">上传</el-button>
                      <span v-if="executio.pifu">
                        <a :href="executio.pifu">{{shili2?shili2:"下载"}}</a>
                        <!-- <a :href="executio.pifu" download>下载</a> | -->
                        <a :href="executio.pifu" target="_blank" class="yulan">预览</a>
                      </span>
                    </li>
                    <!-- 项目合同 -->
                    <li>
                      <el-button size="small" type="primary" v-if="!executio.pact">上传</el-button>
                      <span v-if="executio.pact">
                        <a :href="executio.pact">{{shili3?shili3:"下载"}}</a>
                        <!-- <a :href="executio.pact" download>下载</a> | -->
                        <a :href="executio.pact" target="_blank" class="yulan">预览</a>
                      </span>
                    </li>
                    <!-- 服务承诺书 -->
                    <li>
                      <el-button size="small" type="primary" v-if="!executio.promise">上传</el-button>
                      <span v-if="executio.promise">
                        <a :href="executio.promise">{{shili4?shili4:"下载"}}</a>
                        <!-- <a :href="executio.promise" download>下载</a> | -->
                        <a :href="executio.promise" target="_blank" class="yulan">预览</a>
                      </span>
                    </li>
                    <!-- 中期评审材料 -->
                    <li>
                      <el-button size="small" type="primary" @click="submit_mid">填写并提交</el-button>
                      <el-button size="small" type="primary">修改</el-button>
                      <el-button
                        size="small"
                        type="primary"
                        @click="$jP('excute', { id: zData.id })"
                      >查看</el-button>
                      <!-- <span>
                  <a href="#">中期评估报告.DOC</a>
                      </span>-->
                      <span>
                        <a :href="executio.center" download>下载</a> |
                        <a :href="executio.center" target="_blank">预览</a>
                      </span>
                    </li>
                    <!-- 结项评审材料 -->
                    <li>
                      <el-button size="small" type="primary" @click="post_pro">填写并提交</el-button>
                      <el-button size="small" type="primary">修改</el-button>
                      <el-button
                        size="small"
                        type="primary"
                        @click="$jP('over', { id: zData.id })"
                      >查看</el-button>
                      <!-- <span>
                  <a href="#">中期评估报告.DOC</a>
                      </span>-->
                      <span>
                        <a :href="executio.over" download>下载</a> |
                        <a :href="executio.over" target="_blank">预览</a>
                      </span>
                      <!-- <span>
                  <a href="#">中期评估报告.DOC</a>
                      </span>-->
                      <span>
                        <a :href="executio.over" download>下载</a> |
                        <a :href="executio.over" target="_blank">预览</a>
                      </span>
                    </li>
                  </ul>
                </div>
                <!--右边-->
                <div class="excute_tab">
                  <div class="caption">
                    <span @click="num = 0" :class="{ active: num == 0 }">月工作报表统计</span>
                    <span @click="num = 1" :class="{ active: num == 1 }">优秀活动新闻稿</span>
                    <!-- <span @click="num = 2" :class="{ active: num == 2 }">监测活动信息</span> -->
                    <div class="speed_box">
                      <el-button
                        type="text"
                        v-show="num == 0"
                        @click="dialogTableVisible = true"
                      >+月工作报表</el-button>
                      <el-dialog title="添加月度报告" :visible.sync="dialogTableVisible">
                        <aside>
                          <div>
                            <label>一、项目名称:</label>
                            <input
                              type="text"
                              name="name"
                              readonly
                              v-model="zData.name"
                              required
                              class="division"
                            />
                          </div>
                          <div>
                            <label>二、机构名称:</label>
                            <input
                              type="text"
                              name="name"
                              readonly
                              v-model="zData.company"
                              required
                              class="division"
                            />
                          </div>
                          <div>
                            <label>三、日期选择:</label>
                            <!-- <select v-model="month">
                        <option
                          v-for="(x, index) in shuju"
                          :key="index"
                          :value="x.id"
                          >{{ x.name }}</option
                        >
                            </select>-->
                            <input type="date" name="aterm1" v-model="month" value required />
                          </div>
                          <div>
                            <label>四、模板下载：</label>
                            <span>
                              <a href="#">示例文字下载.DOC</a>
                              <a href="#" download>下载</a>
                            </span>
                          </div>
                          <div class="mid_box">
                            <label>五、上传电子版月报文件：</label>
                            <div class="xxxx">
                              <template>
                                <el-upload
                                  class="upload-demo"
                                  :action="$upload"
                                  :on-preview="handlePreview"
                                  :on-remove="handleRemove"
                                  :on-success="successUploadTwo"
                                  :before-remove="beforeRemove"
                                  multiple
                                  :limit="10"
                                  :on-exceed="handleExceed"
                                  :file-list="fileLists"
                                >
                                  <el-button size="small" type="primary">上传文件</el-button>
                                  <!-- <span slot="tip" class="el-upload__tip">只能上传一张不同的图片</span> -->
                                </el-upload>
                              </template>
                            </div>
                          </div>
                          <el-button
                            size="small"
                            type="primary"
                            @click="subBtn"
                            style="display:block;margin:0 auto"
                          >提交</el-button>
                        </aside>
                      </el-dialog>
                      <el-button
                        type="text"
                        v-show="num == 1"
                        @click="dialogFormVisible = true"
                      >+新闻稿</el-button>
                      <el-dialog title="添加新闻稿" :visible.sync="dialogFormVisible">
                        <aside>
                          <div>
                            <label>一、项目名称:</label>
                            <input
                              type="text"
                              name="name"
                              readonly
                              v-model="zData.name"
                              required
                              class="division"
                            />
                          </div>
                          <div>
                            <label>二、机构名称:</label>
                            <input
                              type="text"
                              name="name"
                              readonly
                              v-model="zData.company"
                              required
                              class="division"
                            />
                          </div>
                          <div>
                            <label>三、月份选择:</label>
                            <!-- <select v-model="month">
                        <option
                          v-for="(x, index) in shuju"
                          :key="index"
                          :value="x.id"
                          >{{ x.name }}</option
                        >
                            </select>-->
                            <input type="date" name="aterm" v-model="month" value required />
                          </div>
                          <div>
                            <label>四、模板下载：</label>
                            <span>
                              <a href="#">示例文字下载.DOC</a>
                              <a href="#" download>下载</a>
                            </span>
                          </div>
                          <div class="mid_box">
                            <label>五、上传电子版月报文件：</label>
                            <div class="xxxx">
                              <template>
                                <el-upload
                                  class="upload-demo"
                                  :action="$upload"
                                  :on-preview="handlePreview"
                                  :on-remove="handleRemove"
                                  :on-success="successUploadThree"
                                  :before-remove="beforeRemove"
                                  multiple
                                  :limit="10"
                                  :on-exceed="handleExceed"
                                  :file-list="fileLists"
                                >
                                  <el-button size="small" type="primary">上传文件</el-button>
                                  <!-- <span slot="tip" class="el-upload__tip">只能上传一张不同的图片</span> -->
                                </el-upload>
                              </template>
                            </div>
                          </div>
                          <el-button
                            size="small"
                            type="primary"
                            @click="subsBun"
                            style="display:block;margin:0 auto"
                          >提交</el-button>
                        </aside>
                      </el-dialog>
                    </div>
                  </div>

                  <div class="excute_text">
                    <div class="statistics" v-show="num == 0">
                      <table>
                        <tr>
                          <th>月份</th>
                          <th>提交情况</th>
                          <th>月报文件</th>
                          <th>提交时间</th>
                          <th></th>
                        </tr>
                        <!-- <tr
                    v-for="(names, index) in convers"
                    :key="index"
                    :class="{ on: index % 2 == 0, off: index % 2 != 0 }"
                  >
                    <td>{{mont.month}}</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                      <i class="el-icon-download"></i>
                    </td>
                        </tr>-->
                        <template v-if="searchValue.length == 0">
                          <tr
                            v-for="(info, index) in mont"
                            :key="index"
                            :class="{ on: index % 2 == 0, off: index % 2 != 0 }"
                            class="tr"
                          >
                            <td>{{ info.month }}</td>
                            <td>{{ info.type }}</td>
                            <td>
                              <a :href="info.elereport">{{ info.name }}</a>
                            </td>
                            <td>{{ info.created_at }}</td>
                            <td></td>
                          </tr>
                        </template>
                      </table>
                    </div>
                    <div class="news_release" v-show="num == 1">
                      <table>
                        <tr>
                          <th>项目名称</th>
                          <th>项目执行机构</th>
                          <th>文件名称</th>
                          <th>提交时间</th>
                          <th></th>
                        </tr>
                        <!-- <tr
                    v-for="(names, index) in convers"
                    :key="index"
                    :class="{ on: index % 2 == 0, off: index % 2 != 0 }"
                  >
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                        </tr>-->
                        <template v-if="searchValue.length == 0">
                          <tr
                            class="tr"
                            v-for="(info, index) in newss"
                            :key="index"
                            :class="{ on: index % 2 == 0, off: index % 2 != 0 }"
                          >
                            <td>{{ zData.name }}</td>
                            <td>{{ zData.company }}</td>
                            <td>{{ info.name }}</td>
                            <td>{{ info.created_at }}</td>
                            <td></td>
                          </tr>
                        </template>
                      </table>
                    </div>
                    <div class="monitor" v-show="num == 2">
                      <table>
                        <tr>
                          <th>机构名称</th>
                          <td>{{ jiance.org_name}}</td>
                          <th>预计参与人数</th>
                          <td>{{ jiance.num}}</td>
                        </tr>
                        <tr>
                          <th>活动时间</th>
                          <td>{{ jiance.reserve }}</td>
                          <th>项目联系人</th>
                          <td>{{ jiance.linkman }}</td>
                        </tr>
                        <tr>
                          <th>活动名称</th>
                          <td>{{ jiance.active }}</td>
                          <th>联系方式</th>
                          <td>{{ jiance.tel }}</td>
                        </tr>
                        <tr>
                          <th>活动地点</th>
                          <td>{{ jiance.place }}</td>
                          <th>检查机构</th>
                          <td>{{ jiance.monitor }}</td>
                        </tr>
                        <tr>
                          <th>活动内容</th>
                          <td colspan="3">{{ jiance.detail }}</td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
                <!--tab切换-->
              </div>
            </div>
            <section id="preview" v-if="popupStatus">
              <div class="tc" @click="preview()"></div>
              <section class="tc-text">
                <a
                  v-for="(list, index) in dataFile"
                  :key="index"
                  :href="list.url"
                  target="_blank"
                >{{ list.url }}</a>
              </section>
              <img class="tc-text" :src="zData.proimages" />
            </section>
            <section id="popup" v-if="pop" @click="popUp()">
              <aside @click.stop>
                <img :src="linkData" alt />
              </aside>
            </section>
            <footer-nav class="footer"></footer-nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderNav from "../../components/HeaderNav";
import FooterNav from "../../components/FooterNav";
import AboutUs from "../../components/AboutUs";
import ProjectBrief from "../../components/ProjectBrief";
import ProjectAssessment from "../../components/ProjectAssessment";
import ExistingBasis from "../../components/ExistingBasis";
import MethodsWay from "../../components/MethodsWay";
import scheduling from "../../components/Scheduling";
import DesiredEffect from "../../components/DesiredEffect";
import DivisionLabor from "../../components/DivisionLabor";
import cover from "../../components/Cover";
import RichTextOne from "../../components/RichTextOne";

var preD = function(e) {
  e.preventDefault();
};
export default {
  components: {
    HeaderNav,
    FooterNav,
    AboutUs,
    ProjectBrief,
    ProjectAssessment,
    ExistingBasis,
    MethodsWay,
    scheduling,
    DesiredEffect,
    DivisionLabor,
    cover,
    RichTextOne
  },
  props: {},
  data() {
    return {
      errorMsg: "",
       ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        },
      // ruleForm: {
      //   name: "",
      //   region: "",
      //   region1: "",
      //   region2: "",
      //   date1: "",
      //   date2: "",
      //   yiji: "",
      //   erji: "",
      //   serve: "",
      //   danwei: "",
      //   tongxun: "",
      //   youzheng: "",
      //   email: "",
      //   call: "",
      //   faren: "",
      //   farencode: "",
      //   fuzeren: "",
      //   zhiwu: "",
      //   tel: "",
      //   phone: "",
      //   fuzeren1: "",
      //   zhiwu1: "",
      //   tel1: "",
      //   phone1: ""
      // },
      // rules: {
      //   name: [
      //     { required: true, message: "请输入项目名称", trigger: "blur" },
      //     { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
      //   ],
      //   region1: [
      //     { required: true, message: "请选择项目类型", trigger: "change" }
      //   ],
      //   region2: [
      //     { required: true, message: "请选择项目落地区域", trigger: "change" }
      //   ],
      //   region: [
      //     { required: true, message: "请输入项目申报单位", trigger: "blur" }
      //   ],
      //   yiji: [
      //     { required: true, message: "请输入一级项目方向", trigger: "blur" }
      //   ],
      //   erji: [
      //     { required: true, message: "请输入二级项目方向", trigger: "blur" }
      //   ],
      //   serve: [
      //     { required: true, message: "请输入项目服务领域", trigger: "blur" }
      //   ],
      //   danwei: [
      //     { required: true, message: "请输入申报单位属性", trigger: "blur" }
      //   ],
      //   tongxun: [
      //     { required: true, message: "请输入通讯地址", trigger: "blur" }
      //   ],
      //   youzheng: [
      //     { required: true, message: "请输入邮政编码", trigger: "blur" }
      //   ],
      //   email: [{ required: true, message: "请输入电子邮箱", trigger: "blur" }],
      //   faren: [{ required: true, message: "请输入法定代表人", trigger: "blur" }],
      //   farencode: [{ required: true, message: "请输入法人代码", trigger: "blur" }],
      //   fuzeren: [{ required: true, message: "请输入负责人姓名", trigger: "blur" }],
      //   zhiwu: [{ required: true, message: "请输入职务", trigger: "blur" }],
      //   tel: [{ required: true, message: "请输入办公电话", trigger: "blur" }],
      //   phone: [{ required: true, message: "请输入手机", trigger: "blur" }],
      //   fuzeren1: [{ required: true, message: "请输入负责人姓名", trigger: "blur" }],
      //   zhiwu1: [{ required: true, message: "请输入职务", trigger: "blur" }],
      //   tel1: [{ required: true, message: "请输入办公电话", trigger: "blur" }],
      //   phone1: [{ required: true, message: "请输入手机", trigger: "blur" }],
      //   date1: [
      //     {
      //       type: "date",
      //       required: true,
      //       message: "请选择日期",
      //       trigger: "change"
      //     }
      //   ],
      //   date2: [
      //     {
      //       type: "date",
      //       required: true,
      //       message: "请选择时间",
      //       trigger: "change"
      //     }
      //   ],
      // },

      shili: "",
      shili1: "",
      shili3: "",
      shili2: "",
      shili4: "",
      convers: [],
      num: 0,
      index_num: 2,
      sub: 0,
      imgUrl1: {
        tg: require("../../../static/img/tg.png"),
        btg: require("../../../static/img/btg.png"),
        shz: require("../../../static/img/shz.png"),
        zxz: require("../../../static/img/zxz.png"),
        sx0: require("../../../static/img/sx0.png"),
        sx1: require("../../../static/img/sx1.png"),
        d0: require("../../../static/img/d0.png"),
        d1: require("../../../static/img/d1.png"),
        xd: require("../../../static/img/xd.png")
      },
      msg: "我们确认项目申报内容的真实性,并愿意承担相应的责任",
      state: 0,
      zt: 2,
      popupStatus: false,
      text: [
        "第一步：填写并提交项目申报书",
        "第二步：线上初筛审核",
        "第三步：项目初筛结果查询",
        "第四步：线下立项评审",
        "第五步：立项结果查询"
      ],
      zData: [],
      zDate: [],
      dataFile: null,
      id: Number,
      fileName: null,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px",
      name: " ",
      imageUrl: " ",
      // shuju: [
      //   { name: '1月', id: 1 },
      //   { name: '2月', id: 2 },
      //   { name: '3月', id: 3 },
      //   { name: '4月', id: 4 },
      //   { name: '5月', id: 5 },
      //   { name: '6月', id: 6 },
      //   { name: '7月', id: 7 },
      //   { name: '8月', id: 8 },
      //   { name: '9月', id: 9 },
      //   { name: '10月', id: 10 },
      //   { name: '11月', id: 11 },
      //   { name: '12月', id: 12 }
      // ],
      fileLists: [],
      month: "",
      executio: null,
      pop: false,
      linkData: "",
      jiance: null,
      mont: null,
      newss: null,
      searchValue: [],
      proinfo: true,
      fileid: 0,
      filename: "",
      fileurl: "",
      status: false,
      progress: 0,

      index_num: 2,
      sub: 0,
      bgData: null,
      initialTextVal: "",
      initialText: "",
      aboutUsText: "<h1>aaa</h1>",
      aboutUsVal: "<h1>aaa</h1>",
      projectBriefVal: "",
      projectBriefText: "",
      projectAssessmentVal: "",
      projectAssessmentText: "",
      existingBasisVal: "",
      existingBasisText: "",
      methodsWayVal: "",
      methodsWayText: "",
      schedulingVal: "",
      schedulingText: "",
      desiredEffectVal: "",
      desiredEffectText: "",
      divisionLaborVal: "",
      divisionLaborText: "",
      coverVal: "",
      coverText: "",
      thff: false,
      imgUrl: {
        bg0: require("../../../static/img/bg0.png"),
        bg1: require("../../../static/img/bg1.png"),
        xa: require("../../../static/img/xa.png")
      },
      fileLists: [],
      popupStatus: false,
      first_levels: [],
      types: [],
      area: [],
      name: "",
      company: "",
      tid: "",
      rid: "",
      first_level: "",
      secondary: "",
      fieldeara: "",
      attribute: "",
      aterm1: "",
      fterm: "",
      postaladdress: "",
      postalcode: "",
      pmail: "",
      fax_tel: "",
      plegal: "",
      plcode: "",
      pname: "",
      poster: "",
      poffice_tel: "",
      aphone: "",
      cname: "",
      cpost: "",
      coffice_tel: "",
      cphone: "",
      prespo: "",
      respoadd: "",
      respopcode: "",
      respomail: "",
      respophone: "",
      respoctel: "",
      respopname: "",
      respopost: "",
      respoophone: "",
      respoptel: "",
      respocname: "",
      respocpost: "",
      respocophone: "",
      decldes: "",
      prodes: "",
      prodemo: "",
      prodemojc: "",
      prodemotj: "",
      prodemojd: "",
      prodemoxg: "",
      prodemofg: "",
      prodemotwo: "",
      funds: "",
      proimages: "",
      subStatus: 0,
      picture: [],
      pid: 0,
      imgs: [],
      imageUrl: "",
      imageUrl1: "",
      imageUrl2: "",
      imageUrl3: "",
      imageUrl4: "",
      idProject: "",
      fileurl: "",
      fileurl1: "",
      fileurl2: "",
      fileurl3: "",
      fileurl4: "",
      filename: "",
      filename1: "",
      filename2: "",
      filename3: "",
      filename4: "",
      sub1: 0,
      project_id: 0
    };
  },
  computed: {},
  watch: {
    popupStatus(val) {
      if (val) {
        document.body.style.overflow = "hidden";
        document.addEventListener("touchmove", preD, {
          passive: false
        }); /** 禁止页面滑动 */
      } else {
        document.body.style.overflow = ""; /** 出现滚动条 */
        document.removeEventListener("touchmove", preD, { passive: false });
      }
    }
  },
  methods: {
     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        console.log(formName)
        this.$refs[formName].resetFields();
      },
    // downloadTxt(content, filename) {
    //   var eleLink = document.createElement('a');
    //   eleLink.download = filename;
    //   eleLink.style.display = 'none';
    //   // 字符内容转变成blob地址
    //   var blob = new Blob([content]);
    //   eleLink.href = URL.createObjectURL(blob);
    //   // 触发点击
    //   document.body.appendChild(eleLink);
    //   eleLink.click();
    //   // 然后移除
    //   document.body.removeChild(eleLink);
    // window.location.href = o; // 本窗口打开下载
    // window.open(centent, '_blank'); // 新开窗口下载
    // },
    thf() {
      this.thff = !this.thff;
    },
    next(e) {
      this.sub1 = e;
    },
    submitYes() {
      console.log(111);
      this.popupStatus = false;
      let _this = this;
      this.$http({
        method: "post",
        url: "v1/project/apply-two",
        data: {
          project_id: _this.project_id,
          id: _this.pid,
          subStatus: _this.subStatus,
          name: _this.name,
          company: _this.company,
          tid: _this.tid,
          rid: _this.rid,
          first_level: _this.first_level,
          secondary: _this.secondary,
          fieldeara: _this.fieldeara,
          attribute: _this.attribute,
          aterm: _this.aterm,
          fterm: _this.fterm,
          postaladdress: _this.postaladdress,
          postalcode: _this.postalcode,
          pmail: _this.pmail,
          fax_tel: _this.fax_tel,
          plegal: _this.plegal,
          plcode: _this.plcode,
          pname: _this.pname,
          poster: _this.poster,
          poffice_tel: _this.poffice_tel,
          aphone: _this.aphone,
          cname: _this.cname,
          cpost: _this.cpost,
          coffice_tel: _this.coffice_tel,
          cphone: _this.cphone,
          prespo: _this.prespo,
          respoadd: _this.respoadd,
          respopcode: _this.respopcode,
          respomail: _this.respomail,
          respophone: _this.respophone,
          respoctel: _this.respoctel,
          respopname: _this.respopname,
          respopost: _this.respopost,
          respoophone: _this.respoophone,
          respoptel: _this.respoptel,
          respocname: _this.respocname,
          respocpost: _this.respocpost,
          respocophone: _this.respocophone,
          decldes: _this.decldes,
          prodes: _this.prodes,
          prodemo: _this.prodemo,
          prodemojc: _this.prodemojc,
          prodemotj: _this.prodemotj,
          prodemojd: _this.prodemojd,
          prodemoxg: _this.prodemoxg,
          prodemofg: _this.prodemofg,
          prodemotwo: _this.prodemotwo,
          funds: _this.funds,
          proimages: _this.proimages,
          probook: _this.fileurl,
          fangan: _this.fileurl1,
          pifu: _this.fileurl2,
          pact: _this.fileurl3,
          promise: _this.fileurl4
        }
      })
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data.code === 200) {
              alert(res.data.data.msg);
              _this.proimages = "";
              _this.$router.push({
                name: "project"
              });
            } else {
              alert(res.data.data.msg);
            }
          } else {
            alert(res.data.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getDataDetails(id) {
      this.$http({
        method: "post",
        url: "v1/project/details",
        data: {
          id: this.id
        }
      })
        .then(res => {
          let m = 0;
          console.log(res, ".......");
          if (res.data.data.code === 200) {
            // this.bgData = res.data.data.data.ProjectDetails;
            this.zData = res.data.data.data.ProjectDetails;
            this.zDate = res.data.data.data.ProjectReview;
            // this.assignment(this.bgData);
            this.status = res.data.data.data.ProjectDetails.status;
            this.dataFile = JSON.parse(this.zData.proimages);
            console.log(this.dataFile, 400);
            for (let i in res.data.data.data.ProjectReview) {
              if (res.data.data.data.ProjectReview[i].sta == 1) {
                m = i;
              }
            }
            console.log(m);
            for (let n in this.zDate) {
              if (n - m <= 0) {
                this.zDate[n].type = 1;
              } else {
                this.zDate[n].type = 0;
              }
            }
            // for(let w in this.zDate){
            //   if(w<=m){
            //     this.zDate[w].type=1
            //     console.log(w,"aaa")
            //   }else{
            //     this.zDate[w].type=0
            //   }
            // }
          } else {
            alert("请求失败！");
          }
        })
        .catch(err => {
          console.log(err);
        });

      this.$http({
        method: "post",
        url: "v1/project/detset",
        data: {
          id: this.id
        }
      })
        .then(res => {
          let m = 0;
          console.log(res, ".......");
          if (res.data.data.code === 200) {
            this.bgData = res.data.data.data.ProjectDetails;
            // this.zData= res.data.data.data.ProjectDetails;
            // this.zDate= res.data.data.data.ProjectReview;
            this.assignment(this.bgData);
            this.filename = this.bgData.probook.substring(
              this.bgData.probook.lastIndexOf("/") + 1
            );
            this.filename1 = this.bgData.fangan.substring(
              this.bgData.fangan.lastIndexOf("/") + 1
            );
            this.filename2 = this.bgData.pifu.substring(
              this.bgData.pifu.lastIndexOf("/") + 1
            );
            this.filename3 = this.bgData.pact.substring(
              this.bgData.pact.lastIndexOf("/") + 1
            );
            this.filename4 = this.bgData.promise.substring(
              this.bgData.promise.lastIndexOf("/") + 1
            );
            // this.status=res.data.data.data.ProjectDetails.status;
            // for(let i in res.data.data.data.ProjectReview){
            //   if(res.data.data.data.ProjectReview[i].sta==1){
            //     m=i
            //   }
            // }
            console.log(m);
            for (let n in this.zDate) {
              if (n - m <= 0) {
                this.zDate[n].type = 1;
              } else {
                this.zDate[n].type = 0;
              }
            }
            // for(let w in this.zDate){
            //   if(w<=m){
            //     this.zDate[w].type=1
            //     console.log(w,"aaa")
            //   }else{
            //     this.zDate[w].type=0
            //   }
            // }
          } else {
            alert("请求失败！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    assignment(data) {
      this.name = data.name;
      // this.company = data.company
      for (var prop in this.types) {
        if (data.tid === this.types[prop]) {
          this.tid = prop;
        }
      }

      for (let prop in this.area) {
        if (data.rid === this.area[prop]) {
          this.rid = prop;
        }
      }

      // this.area.forEach((item, index) => {
      //   if (data.rid === item) {
      //     this.rid = parseInt(index)
      //   }
      // })

      for (let prop in this.first_levels) {
        if (data.first_level === this.first_levels[prop]) {
          this.first_level = prop;
        }
      }
      this.secondary = data.secondary;
      this.fieldeara = data.fieldeara;
      this.attribute = data.attribute;
      this.aterm = data.aterm;
      this.fterm = data.fterm;
      this.postaladdress = data.postaladdress;
      this.postalcode = data.postalcode;
      this.pmail = data.pmail;
      this.fax_tel = data.fax_tel;
      this.plegal = data.plegal;
      this.plcode = data.plcode;
      this.pname = data.pname;
      this.poster = data.poster;
      this.poffice_tel = data.poffice_tel;
      this.aphone = data.aphone;
      this.cname = data.cname;
      this.cpost = data.cpost;
      this.coffice_tel = data.coffice_tel;
      this.cphone = data.cphone;
      this.prespo = data.prespo;
      this.respoadd = data.respoadd;
      this.respopcode = data.respopcode;
      this.respomail = data.respomail;
      this.respophone = data.respophone;
      this.respopname = data.respopname;
      this.respopost = data.respopost;
      this.respoophone = data.respoophone;
      this.respoptel = data.respoptel;
      this.respocname = data.respocname;
      this.respocpost = data.respocpost;
      this.respocophone = data.respocophone;
      this.respoctel = data.respoctel;
      this.aboutUsVal = data.decldes;
      this.aboutUsText = data.decldes;
      this.projectBriefVal = data.prodes;
      this.projectBriefText = data.prodes;
      this.projectAssessmentVal = data.prodemo;
      this.projectAssessmentText = data.prodemo;
      this.existingBasisVal = data.prodemojc;
      this.existingBasisText = data.prodemojc;
      this.methodsWayVal = data.prodemotj;
      this.methodsWayText = data.prodemotj;
      this.schedulingVal = data.prodemojd;
      this.schedulingText = data.prodemojd;
      this.desiredEffectVal = data.prodemoxg;
      this.desiredEffectText = data.prodemoxg;
      this.divisionLaborVal = data.prodemofg;
      this.divisionLaborText = data.prodemofg;
      this.coverVal = data.prodemotwo;
      this.coverText = data.prodemotwo;
      this.initialTextVal = data.funds;
      this.initialText = data.funds;

      this.pid = data.id;

      let imgs = JSON.parse(data.proimages);
      this.fileLists = imgs;
      this.picture = this.fileLists;
    },
    submit(index) {
      let s = this.subStatus;
      s = index;
      this.subStatus = s;
      let regd = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
      let regs = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;

      this.decldes = this.aboutUsText;
      this.prodes = this.projectBriefText;
      this.prodemo = this.projectAssessmentText;
      this.prodemojc = this.existingBasisText;
      this.prodemotj = this.methodsWayText;
      this.prodemojd = this.schedulingText;
      this.prodemoxg = this.desiredEffectText;
      this.prodemofg = this.divisionLaborText;
      this.prodemotwo = this.coverText;
      this.funds = this.initialText;
      // this.proimages = [...this.fileLists, ...this.picture]
      this.proimages = [...this.picture];

      // if (this.subStatus === 1) {
      if (
        this.bgData.name === "" ||
        this.bgData.company === "" ||
        this.tid === "" ||
        this.rid === "" ||
        this.first_level === "" ||
        this.secondary === "" ||
        this.fieldeara === "" ||
        this.attribute === "" ||
        this.aterm === "" ||
        this.fterm === "" ||
        this.postaladdress === "" ||
        this.postalcode === "" ||
        this.pmail === "" ||
        this.plegal === "" ||
        this.plcode === "" ||
        this.pname === "" ||
        this.poster === "" ||
        this.poffice_tel === "" ||
        this.aphone === "" ||
        this.cname === "" ||
        this.cpost === "" ||
        this.coffice_tel === "" ||
        this.cphone === "" ||
        this.prespo === "" ||
        this.respoadd === "" ||
        this.respopcode === "" ||
        this.respomail === "" ||
        this.respopname === "" ||
        this.respopost === "" ||
        this.respoophone === "" ||
        this.respocname === "" ||
        this.respocpost === "" ||
        this.respocophone === "" ||
        this.decldes === "" ||
        this.prodes === "" ||
        this.prodemo === "" ||
        this.prodemojc === "" ||
        this.prodemotj === "" ||
        this.prodemojd === "" ||
        this.prodemoxg === "" ||
        this.prodemofg === "" ||
        this.prodemotwo === "" ||
        this.funds === ""
      ) {
        alert("请认真核对填写内容完整性！");
        return false;
      } else if (this.aterm > this.fterm) {
        alert("截止日期应比申请日期晚");
        return false;
      } else if (!regd.test(this.poffice_tel) || !regd.test(this.coffice_tel)) {
        alert("请填写正确的电话号码！");
        return false;
      } else if (!regs.test(this.aphone) || !regs.test(this.cphone)) {
        alert("请填写正确的手机号码！");
        return false;
      } else if (
        !regd.test(this.respoophone) ||
        !regd.test(this.respocophone)
      ) {
        alert("请填写正确的电话号码！");
        return false;
      } else if (this.thff === false) {
        alert("请同意：申报单位承诺");
        return false;
      } else if (this.proimages.length === 0) {
        alert("未上传文件！");
        return false;
      }

      if (this.respoptel !== "" && !regs.test(this.respoptel)) {
        alert("请填写正确的手机号码！");
        return false;
      }
      if (this.respoctel !== "" && !regs.test(this.respoctel)) {
        alert("请填写正确的手机号码！");
        return false;
      }
      // }

      let val = this.proimages;
      val = JSON.stringify(this.proimages);
      this.proimages = val;

      // if (this.subStatus === 1) {
      if (this.proimages === "") {
        alert("文件还未上传！");
        return false;
      }
      // }
      this.popupStatus = true;
    },
    beforeAvatarUpload() {},
    handleAvatarSuccess(response, file, fileList) {
      this.fileid = file.response.data.id;
      this.filename = file.response.data.name;
      this.fileurl = file.response.data.url;
      console.log(file);
    },
    successUpload(response, file, fileList) {
      this.picture.push({
        name: file.name,
        url: file.response.data.url
      });
    },
    successUploadTwo(response, file, fileList) {
      this.fileid = file.response.data.id;
      this.filename = file.response.data.name;
      this.fileurl = file.response.data.url;
      console.log(file);
    },
    successUploadThree(response, file, fileList) {
      this.fileid = file.response.data.id;
      this.filename = file.response.data.name;
      this.fileurl = file.response.data.url;
      console.log(file);
    },
    handleRemove(file, fileList) {
      this.picture.forEach(element => {
        if (file.name === element.name) {
          this.picture.splice(element, 1);
        }
      });
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name} ?`);
    },
    subBtn() {
      // console.log(this.zData.id, this.month)
      // return false
      var strtime = "2014-04-23 18:55:49:123";
      // 可以这样做
      console.log(this.month);
      var date = new Date(this.month.replace(/-/g, "/"));
      var datefin = Math.round(date.getTime() / 1000).toString();
      // let datefin1=datefin.substr(0,datefin.length-2)
      // console.log(datefin1)
      this.$http({
        method: "post",
        url: "v1/pro/mon",
        data: {
          project_id: this.zData.id,
          month: datefin,
          pid: this.fileid,
          name: this.filename,
          elereport: this.fileurl
        }
      })
        .then(res => {
          if (res.data.data.code === 200) {
            console.log(res, 15656);
            this.dialogTableVisible = false;
            this.getPostData();
          } else {
            alert("请求失败！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    subsBun() {
      var date = new Date(this.month.replace(/-/g, "/"));
      var datefin = Math.round(date.getTime() / 1000).toString();
      this.$http({
        method: "post",
        url: "v1/pro/news",
        data: {
          project_id: this.zData.id,
          month: datefin,
          pid: this.fileid,
          name: this.filename,
          elereport: this.fileurl
        }
      })
        .then(res => {
          if (res.data.data.code === 200) {
            console.log(res, 15656);
            this.dialogFormVisible = false;
            this.getPostData();
          } else {
            alert("请求失败！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    hreftwo() {
      this.$jP("appcationnew", { id: this.id });
    },
    aterm() {},
    tableData() {},
    excute() {
      this.$router.replace("/excute");
    },
    over() {
      this.$router.replace("/over");
    },
    submit_mid() {
      this.$jP("submit_mid", { id: this.id });
      //  $jParams('submit_mid', { id: item.id }
      // this.$router.replace("/submit_mid");
    },
    post_pro() {
      this.$jP("post_pro", { id: this.id });
      // this.$router.replace("/post_pro");
    },
    download() {
      this.getPdf("pdfDom", "项目申请书");
    },
    preview() {
      this.popupStatus = !this.popupStatus;
    },
    btn(index) {
      let s = this.sub;
      s = index;
      this.sub = s;
    },
    getData() {
      let _this = this;
      this.$http({
        method: "get",
        url: "v1/project/get-info",
        data: {}
      })
        .then(res => {
          if (res.data.code === 200) {
            _this.types = res.data.data.type;
            _this.area = res.data.data.area;
            _this.first_levels = res.data.data.first_level;
            if (this.$route.query.id) {
              console.log("回显参数的方法");
              let id = this.$route.query.id;
              this.getDataDetails(id);
            }
          } else {
            _this.$message.error("请求数据有问题！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /** 项目执行信息获取 */
    getPostData() {
      let _this = this;
      this.$http({
        method: "get",
        url: "v1/pro/execute",
        params: {
          id: _this.id
          // id: 133
        }
      })
        .then(res => {
          console.log(res, 88888);
          if (res.data.code === 200) {
            console.log(res);
            if (res.data.data.length != 0) {
              _this.executio = res.data.data.data[0];
              _this.jiance = res.data.data.data[0].det;
              _this.mont = res.data.data.data[0].mon;
              _this.newss = res.data.data.data[0].news;
              let shili = res.data.data.data[0].probook;
              _this.shili = shili.substring(shili.lastIndexOf("/") + 1);
              let shili1 = res.data.data.data[0].fangan;
              _this.shili1 = shili1.substring(shili1.lastIndexOf("/") + 1);
              let shili2 = res.data.data.data[0].pifu;
              _this.shili2 = shili2.substring(shili2.lastIndexOf("/") + 1);
              let shili3 = res.data.data.data[0].pact;
              _this.shili3 = shili3.substring(shili3.lastIndexOf("/") + 1);
              let shili4 = res.data.data.data[0].promise;
              _this.shili4 = shili4.substring(shili4.lastIndexOf("/") + 1);
              console.log(_this.executio, 5680);
            } else {
              this.proinfo = false;
            }
          } else {
            // alert(res.data.data.msg)
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 项目执行信息预览
    popUp(link) {
      console.log(link);
      this.pop = !this.pop;
      this.linkData = link;
    },
    aboutUs(data) {
      console.log(data);
      this.aboutUsText = data;
    },
    projectBrief(data) {
      this.projectBriefText = data;
    },
    existingBasis(data) {
      this.existingBasisText = data;
    },
    methodsWay(data) {
      this.methodsWayText = data;
    },
    scheduling(data) {
      this.schedulingText = data;
    },
    desiredEffect(data) {
      this.desiredEffectText = data;
    },
    projectAssessment(data) {
      this.projectAssessmentText = data;
    },
    divisionLabor(data) {
      this.divisionLaborText = data;
    },
    cover(data) {
      this.coverText = data;
    },
    quillVal(data) {
      this.initialText = data;
    },
    handleAvatarSuccess1(res, file) {
      console.log(file);
      this.fileurl1 = file.response.data.url;
      this.imageUrl1 = "/index/timg.jpg";
      this.filename1 = file.response.data.name;
      // this.imageUrl1 = URL.createObjectURL(file.raw);
      //         if(file.response.data.extension=="docx"){
      // this.imageUrl1 = "../../../src/static/img/word.png";
      //     }else if(file.response.data.extension=="xls"){
      //       this.imageUrl1 = "../../../src/static/img/excel.png";
      //     }else if(file.response.data.extension=="pptx"){
      //       this.imageUrl1  = "../../../src/static/img/ppt.png";
      //     }else if(file.response.data.extension=="pdf"){
      //       this.imageUrl1 = "../../../src/static/img/pdf.jpg";
      //     }
    },

    handleAvatarSuccess2(res, file) {
      console.log(file);
      this.fileurl2 = file.response.data.url;
      this.imageUrl2 = "/index/timg.jpg";
      this.filename2 = file.response.data.name;
      // this.imageUrl2 = URL.createObjectURL(file.raw);
      //         if(file.response.data.extension=="docx"){
      // this.imageUrl2 = "../../../src/static/img/word.png";
      //     }else if(file.response.data.extension=="xls"){
      //       this.imageUrl2 = "../../../src/static/img/excel.png";
      //     }else if(file.response.data.extension=="pptx"){
      //       this.imageUrl2 = "../../../src/static/img/ppt.png";
      //     }else if(file.response.data.extension=="pdf"){
      //       this.imageUrl2 = "../../../src/static/img/pdf.jpg";
      //     }
    },
    handleAvatarSuccess3(res, file) {
      console.log(file);
      this.fileurl3 = file.response.data.url;
      this.imageUrl3 = "/index/timg.jpg";
      this.filename3 = file.response.data.name;
      // this.imageUrl3 = URL.createObjectURL(file.raw);
      //         if(file.response.data.extension=="docx"){
      // this.imageUrl3 = "../../../src/static/img/word.png";
      //     }else if(file.response.data.extension=="xls"){
      //       this.imageUrl3 = "../../../src/static/img/excel.png";
      //     }else if(file.response.data.extension=="pptx"){
      //       this.imageUrl3 = "../../../src/static/img/ppt.png";
      //     }else if(file.response.data.extension=="pdf"){
      //       this.imageUrl3 = "../../../src/static/img/pdf.jpg";
      //     }
    },
    handleAvatarSuccess4(res, file) {
      console.log(file);
      this.fileurl4 = file.response.data.url;
      // this.imageUrl4 = URL.createObjectURL(file.raw);
      this.imageUrl4 = "/index/timg.jpg";
      this.filename4 = file.response.data.name;
      //         if(file.response.data.extension=="docx"){
      // this.imageUrl4 = "../../../src/static/img/word.png";
      //     }else if(file.response.data.extension=="xls"){
      //       this.imageUrl4 = "../../../src/static/img/excel.png";
      //     }else if(file.response.data.extension=="pptx"){
      //       this.imageUrl4 = "../../../src/static/img/ppt.png";
      //     }else if(file.response.data.extension=="pdf"){
      //       this.imageUrl4 = "../../../src/static/img/pdf.jpg";
      //     }
    }
  },
  created() {
    this.id = this.$route.params.id;
    this.project_id = this.$route.query.id;
    this.getData();
    this.getPostData();
    this.getDataDetails(this.$route.query.id);
  }
};
</script>

<style lang="scss" scoped>
// .wrapper /deep/ .excute_rt /deep/ a[data-v-ef9a20de]{
//   margin-right: 10px!important
// }
.d1 {
  position: relative;
  left: 6px;
  top: 5px;
}
.title1 {
  position: relative;
  right: 474px;
}
.yulan {
  margin-left: 15px !important;
}
.wrapper /deep/ th {
  height: 64px !important;
  line-height: 64px !important;
}
.wrapper /deep/ table td {
  height: 53px;
  line-height: 53px;
}
#wrapper {
  min-width: 1200px;
}
#one_e {
  width: 100%;
  margin-top: 27px;
  margin-bottom: 60px;
  padding-top: 27px;
}

#popup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0%;
  left: 0%;
  z-index: 999;
  background-color: rgba($color: #000000, $alpha: 0.8);

  aside {
    background: #fff;
    width: 50%;
    height: 80vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

#preview {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0%;
  left: 0%;
  z-index: 999;

  .tc {
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000, $alpha: 0.58);
    position: fixed;
    top: 0%;
    left: 0%;
    // display: none;
  }

  .tc-text {
    // width: 350px;
    // width:100%;
    padding: 30px;
    box-sizing: border-box;
    height: auto;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);

    a {
      display: inline-block;
      margin-top: 10px;
      cursor: pointer;
    }
  }
}

.fliter {
  -webkit-filter: blur(10px);
  -o-filter: blur(10px);
  -moz-filter: blur(10px);
  filter: blur(10px);
}

.wrapper {
  min-width: 1280px;
  box-sizing: border-box;

  #box {
    // margin: 40px auto 0;
    width: 1200px;
    background-color: #ffffff;
    // padding: 35px 30px 100px;
    box-sizing: border-box;
    position: relative;

    .boxx {
      margin-top: 68px;
      width: 85%;
      margin-left: 127px;
      box-sizing: border-box;

      .one-e {
        width: 98%;
        margin-top: 27px;
        margin-bottom: 60px;
        margin-left: -61px;
        p {
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 39px;
          letter-spacing: 0px;
          color: #666666;
        }

        span {
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 39px;
          letter-spacing: 0px;
          color: #7471ef;
        }
      }

      .one-o {
        width: 108%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30px;
        margin-bottom: 60px;
        margin-left: -71px;

        ul {
          width: 350px;
          height: 674px;
          box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
          border-radius: 5px;
          padding: 30px 0 0 20px;
          box-sizing: border-box;

          li {
            font-family: "MicrosoftYaHei";
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            margin-bottom: 28px;
            color: #333333;
          }
        }
      }
      h3 {
        font-family: "MicrosoftYaHei";
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
      }
      h4 {
        margin-top: 38px;
        font-family: "MicrosoftYaHei";
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
      }
      h5 {
        margin-top: 38px;
        font-family: "MicrosoftYaHei";
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
      }
    }

    .bobb {
      margin-top: 110px;
      width: 100%;
      height: 974px;
      padding: 0 40px 0 11px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      .left {
        width: 419px;
        height: 974px;
        display: flex;
        justify-content: space-evenly;
        align-items: flex-start;
        margin-bottom: 163px;
        .time {
          width: 120px;
          height: 734px;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          align-items: flex-end;
          margin-top: 72px;

          .span {
            display: inline-block;
            width: 119px;
            height: 18px;
            font-family: "MicrosoftYaHei";
            font-size: 22px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
          }
        }

        .jdt {
          width: 32px;
          height: 974px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;

          .sx0 {
            width: 3px;
            height: 61px;
            margin-left: 14px;
          }

          .sx1 {
            width: 3px;
            height: 61px;
            margin-left: 14px;
          }

          .wzx {
            width: 20px;
            height: 21px;
          }

          .zx {
            width: 20px;
            height: 21px;
          }
        }

        .bb {
          margin-top: 70px;
          width: 180px;
          height: 837px;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          align-items: flex-start;

          .o {
            padding-left: 5px;
            box-sizing: border-box;
            width: 170px;
            height: 36px;
            position: relative;
            top: -13px;
            border-bottom: 2px solid #b0c3cd;

            img {
              width: 10px;
              height: 10px;
              position: absolute;
              right: 0%;
              bottom: -16%;
            }
          }

          div {
            padding-left: 5px;
            box-sizing: border-box;
            width: 100%;
            height: 36px;
            position: relative;
            border-bottom: 2px solid #b0c3cd;

            img {
              width: 10px;
              height: 10px;
              position: absolute;
              right: 0%;
              bottom: -16%;
            }

            section {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              width: 132%;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              font-family: "MicrosoftYaHei";
              position: absolute;
              left: -8%;
              bottom: -100%;
              white-space: nowrap;
            }
          }

          span {
            display: inline-block;
            width: 135px;
            height: 22px;
            text-align: center;
            line-height: 22px;
            font-family: "MicrosoftYaHei";
            font-size: 15px;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
          }
        }
      }
      .newButton {
        position: absolute;
        top: 0;
        right: 200px;
        z-index: 999;
        top: -80px;
        .newBtn {
          height: 45px;
          width: 150px;
          background: #e60012;
          color: #fff;
          border: none;
        }
      }
      .right {
        // padding: 35px 30px;
        box-sizing: border-box;
        width: 535px;
        height: 1000px;
        position: relative;
        z-index: 0;
        bottom: 40px;
        // box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
        // border-radius: 10px;
        img {
          width: 100% !important;
          height: 100% !important;
        }
        ul {
          margin-top: 48px;

          li {
            font-family: "MicrosoftYaHei";
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 48px;
            letter-spacing: 0px;
            color: #666666;
          }
          .xd {
            width: 343px;
            height: 472px;
          }
        }

        p {
          text-align: center;
          width: 100%;
          font-family: "MicrosoftYaHei";
          font-size: 24px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 31px;
          letter-spacing: 0px;
          color: #333333;
        }
      }
    }

    .img {
      width: 119px;
      height: 95px;
      position: absolute;
      right: 0%;
      top: 1%;
      img {
        width: 119px;
        height: 95px;
      }
    }

    .top {
      width: 1000px;
      height: 67px;
      line-height: 67px;
      border-bottom: 1px solid #ccc;
      padding-left: 12px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .daochu {
        width: 96px;
        height: 32px;
        background-image: linear-gradient(
            69deg,
            #cc263f 0%,
            #f42b47 100%,
            #ed162d 100%,
            #e60012 100%
          ),
          linear-gradient(#e60012, #e60012);
        background-blend-mode: normal, normal;
        border-radius: 4px;
        font-family: "MicrosoftYaHei";
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 32px;
        text-align: center;
        letter-spacing: 0px;
        color: #ffffff;
      }

      .span {
        span {
          margin-right: 40px;
          display: inline-block;
          width: 120px;
          height: 38px;
          text-align: center;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        .style {
          color: #e60012;
          position: relative;
          &::after {
            content: "";
            width: 120px;
            height: 2px;
            background-color: #e60012;
            position: absolute;
            bottom: -31px;
            left: 0%;
          }
        }
      }
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border: 1.5px dashed #666;
    margin-left: 30px;
    margin-top: 15px;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .excuteBox {
    // border: 1px solid red;
    width: 100%;
    height: 800px;
  }
  .excute_list {
    float: left;
  }
  .excute_list li {
    font-size: 18px;
    line-height: 50px;
    color: #333;
  }
  .excute_rt li {
    line-height: 49px;
    color: #666666;
  }
  .excute_rt {
    // border:1px solid red;
    margin-left: 50px;
    float: left;
  }
  .excute_rt span {
    padding-right: 20px;
    font-size: 14px;
    color: #7471ef;
  }
  .excute_rt a {
    font-size: 14px;
    color: #7471ef;
  }
  .excute_tab {
    clear: both;
    width: 90%;
    margin: 0 auto;
    padding-top: 40px;
    // border: 1px solid green;
  }
  /deep/ .el-button--primary {
    border: none;
    cursor: pointer;
    margin-right: 20px;
    height: 30px;
    border-radius: 4px;
    background-image: linear-gradient(
        69deg,
        #cc263f 0%,
        #f42b47 100%,
        #ed162d 100%,
        #e60012 100%
      ),
      linear-gradient(#e60012, #e60012);
    font-family: "MicrosoftYaHei";
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
  }
  .caption {
    width: 100%;
    height: 38px;
    border-bottom: 1px solid #dedede;
    margin-top: 76px;
    margin-bottom: 30px;
    padding-left: 30px;
    box-sizing: border-box;
    position: relative;
    span {
      display: inline-block;
      height: 38px;
      text-align: center;
      font-family: "MicrosoftYaHei";
      font-size: 20px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #333333;
      margin-right: 49px;
    }
    span.active {
      border-bottom: 2px solid #7471ef;
    }
    .speed_box {
      position: absolute;
      right: 10px;
      top: 10px;
    }
    .speed_box a {
      color: #7471ef;
      font-size: 16px;
    }
  }
  th {
    line-height: 40px;
    text-align: center;
    height: 40px;
    font-family: "MicrosoftYaHei";
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #666666;
    background-color: rgba(247, 247, 247, 1);
    box-sizing: border-box;

    &:nth-of-type(1) {
      width: 200px;
    }
    &:nth-of-type(2) {
      width: 250px;
    }
    &:nth-of-type(3) {
      width: 200px;
    }
    &:nth-of-type(4) {
      width: 200px;
    }
    &:nth-of-type(5) {
      width: 180px;
    }
  }
  .statistics {
    td {
      border: none !important;
    }
  }
  .on {
    background-color: #fff;
  }
  .off {
    background-color: #f7f7f7;
  }
  .monitor {
    th {
      width: 252px;
      border: 2px solid #d7d3d3;
    }
    td {
      width: 260px;
      border: 2px solid #d7d3d3 !important;
    }
  }
  .news_release {
    td {
      border: none !important;
    }
  }
  .footer {
    width: 123% !important;
    margin-top: 80px;
    position: relative;
    top: 101px;
    position: relative;
    right: 126px;
  }
  label {
    margin-left: 16px;
    font-family: "MicrosoftYaHei";
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    line-height: 25px;
    letter-spacing: 0px;
    color: #333333;
    text-align: right;
    display: inline-block;
  }
  input {
    box-sizing: border-box;
    width: 33.8%;
    height: 35px;
    background-color: #ffffff;
    border: solid 1px #c7c7c7;
    outline: none;
    // margin-left: 35px;
    margin-bottom: 15px;
    font-family: "MicrosoftYaHei";
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #323232;
    // margin-right: 35px;
  }
}
select {
  box-sizing: border-box;
  width: 33.8%;
  height: 35px;
  background-color: #ffffff;
  border: solid 1px #c7c7c7;
  outline: none;
  margin-left: 35px;
  margin-bottom: 15px;
  font-family: "MicrosoftYaHei";
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #323232;
  margin-right: 35px;
}

.mid_box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  .avatar-uploader {
    margin-right: 20px;
  }
}
.rich {
  z-index: 10;
  width: 100%;
  margin: 30px 0px;
  height: 320px;
}
.img-img {
  margin-top: 25px;
  width: 150px;
  height: auto;

  &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
}
.wrapper {
  min-width: 1100px;
  box-sizing: border-box;

  .queren {
    z-index: 999;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0%;
    top: 0%;
    background-color: rgba($color: #000, $alpha: 0.56);
    display: flex;
    align-items: center;
    justify-content: center;

    & > div {
      width: 500px;
      height: 400px;
      background: #fff;
      border-radius: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 100px 0 100px;
      box-sizing: border-box;

      & > span {
        text-align: center;
        width: 120%;
        color: #000;
      }

      & > p {
        font-size: 32px;
        font-weight: 600;
        width: 258px;
      }

      & > div {
        width: 100%;
        padding: 32px;
        box-sizing: border-box;
        margin: 20px auto 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 30px;
          cursor: pointer;
        }
      }
    }
  }

  #box {
    // margin: 40px auto 0;
    // padding: 34px 32px 100px 28px;
    box-sizing: border-box;
    width: 1100px;
    background-color: #ffffff;
    margin: 0 auto;
    margin-top: 12px;

    form {
      width: 1038px;
      margin: 0 auto;
      .ll {
        margin-top: 80px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        button[type="button"] {
          margin-right: 152px;
          width: 197px;
          height: 63px;
          background-color: #ff9800;
          border-radius: 5px;
          font-family: "MicrosoftYaHei";
          font-size: 26px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 63px;
          letter-spacing: 0px;
          color: #ffffff;
          text-align: center;
          outline: none;
          border: 0;
        }

        button[type="submit"] {
          width: 197px;
          height: 63px;
          background-color: #e60012;
          border-radius: 5px;
          font-family: "MicrosoftYaHei";
          font-size: 26px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 63px;
          text-align: center;
          letter-spacing: 0px;
          color: #ffffff;
          outline: none;
          border: 0;
        }
      }

      .xxx {
        margin-top: 60px;
        width: 100%;
        // height: 72px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        .plpl {
          display: flex;
          align-items: center;
          label {
            margin-left: 16px;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 25px;
            letter-spacing: 0px;
            color: #323232;
          }

          .iconfont {
            font-size: 22px;
            color: #999;
          }
          .ic {
            color: #e60012;
          }
        }

        .xxxx {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          span {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            text-align: center;
            margin-left: 25px;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #000;
          }

          /deep/ .upload-demo {
            margin-bottom: 10%;
          }

          /deep/ .el-button--primary {
            margin-top: 32px;
            border: none;
            cursor: pointer;
            width: 96px;
            height: 32px;
            border-radius: 4px;
            background-image: linear-gradient(
                69deg,
                #cc263f 0%,
                #f42b47 100%,
                #ed162d 100%,
                #e60012 100%
              ),
              linear-gradient(#e60012, #e60012);
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }

          /deep/ .el-upload-list.el-upload-list--text {
            max-height: 100px;
            overflow-y: scroll;

            &::-webkit-scrollbar {
              width: 3px;
              // height: 5px;
            }

            &::-webkit-scrollbar-track-piece {
              background-color: rgba(0, 0, 0, 0.2);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }

            &::-webkit-scrollbar-thumb:vertical {
              height: 5px;
              background-color: rgba(125, 125, 125, 0.7);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }

            &::-webkit-scrollbar-thumb:horizontal {
              width: 5px;
              background-color: rgba(125, 125, 125, 0.7);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }
          }
        }

        .btnn {
          cursor: pointer;
          width: 96px;
          height: 32px;
          background-image: linear-gradient(
              69deg,
              #cc263f 0%,
              #f42b47 100%,
              #ed162d 100%,
              #e60012 100%
            ),
            linear-gradient(#e60012, #e60012);
          background-blend-mode: normal, normal;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;

          label {
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }
        }
      }

      .xx {
        margin-top: 60px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        textarea {
          margin-top: 30px;
          width: 1139px;
          height: 138px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          resize: none !important;

          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 39px;
          letter-spacing: 0px;
          color: #999999;
        }

        article {
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 39px;
          letter-spacing: 0px;
          color: #999;
        }

        p {
          margin-top: 38px;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        h5 {
          width: 100%;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        h3 {
          width: 100%;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
          margin-top: 38px;
        }
      }

      .cc {
        width: 1140px;
        margin: 0 auto 0px;
        aside {
          width: 100%;
          height: 43px;
          right: -7px;
          div {
            display: flex;
            align-items: center;

            label {
              display: inline-block;
              // width: 101px;
              height: 43px;
              font-family: "MicrosoftYaHei";
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 43px;
              text-align: right;
              letter-spacing: 0px;
              color: #323232;
              white-space: nowrap;
            }

            .i-i {
              width: 1009px;
              height: 43px;
              background-color: #ffffff;
              border: solid 1px #c7c7c7;
              outline: none;
              margin-left: 20px;
              font-family: "MicrosoftYaHei";
              font-size: 18px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #323232;
            }
          }
        }
      }

      .btn {
        margin: 60px auto 0;
        width: 230px;
        height: 63px;
        background-color: #e60012;
        border-radius: 5px;
        font-family: "MicrosoftYaHei";
        font-size: 26px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 63px;
        letter-spacing: 0px;
        text-align: center;
        color: #ffffff;
      }

      aside {
        width: 1138px;
        height: 43px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        position: relative;
        right: 69px label {
          display: inline-block;
          width: 130px;
          height: 43px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 43px;
          text-align: right;
          letter-spacing: 0px;
          color: #323232;
          white-space: nowrap;
        }

        select {
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 360px center no-repeat;
          background-size: 14px 8px;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          // padding-left: 83px;
          box-sizing: border-box;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        input {
          box-sizing: border-box;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        .i {
          width: 151px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }
      }

      section {
        width: 1138px;
        height: 43px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 65px;

        label {
          display: inline-block;
          width: 100px;
          height: 43px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 43px;
          text-align: right;
          letter-spacing: 0px;
          color: #323232;
          white-space: nowrap;
        }

        select {
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 360px center no-repeat;
          background-size: 14px 8px;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          // padding-left: 83px;
          box-sizing: border-box;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        input {
          box-sizing: border-box;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        .i {
          width: 151px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }
      }

      h4 {
        width: 1138px;
        height: 38px;
        font-family: "MicrosoftYaHei";
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        padding-left: 30px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        margin-bottom: 54px;
      }
    }

    .box {
      width: 395px;
      height: 34px;
      margin: 44px auto 70px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        width: 192px;
        height: 34px;
        background-size: 100% 100%;
        font-family: "MicrosoftYaHei";
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34px;
        text-align: center;
        letter-spacing: 0px;
        color: #333333;
      }

      .color {
        color: #fff;
      }
    }

    h3 {
      width: 200px;
      height: 23px;
      margin: 0 auto;
      font-family: "MicrosoftYaHei";
      font-size: 22px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #333333;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1.5px dashed #666;
  }
  .avatar {
    // width: 178px;
    // height: 178px;
    width: 103px;
    height: 103px;
  }
  .mid_box {
    flex-direction: row;
  }
  .footer {
    width: 100%;
    margin-top: 80px;
  }
}
.box1 {
  width: 127px;
  font-size: 15px;
  margin-top: 20px;
  margin-left: 29px;
  word-wrap: break-word;
  margin-right: 35px;
}
</style>
